<script setup>

  import {ref} from 'vue'

  let cartData = ref([
      {name:"可口可乐", price:3.5, number:4, stock:20,img:"https://t15.baidu.com/it/u=67272893,2747006368&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1731776400&t=c2e0a2e9970acc34a8dd69c65e2ad372"},
      {name:"卫龙辣条", price:3, number:10, stock:30,img:"https://gimg3.baidu.com/topone/src=https%3A%2F%2Fbkimg.cdn.bcebos.com%2Fsmart%2Faec379310a55b319ceff789d44a98226cefc17d7-bkimg-process%2Cv_1%2Crw_1%2Crh_1%2Cmaxl_800%2Cpad_1%3Fx-bce-process%3Dimage%2Fresize%2Cm_pad%2Cw_348%2Ch_348%2Ccolor_ffffff&refer=http%3A%2F%2Fwww.baidu.com&app=2011&size=f200,200&n=0&g=0n&er=404&q=75&fmt=auto&maxorilen2heic=2000000?sec=1731776400&t=bd7de0aad0f64d1c7dcb86684e349781"},
      {name:"飞天老窖", price:58, number:6, stock:20,img:"https://t14.baidu.com/it/u=178360000,2053298409&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1731776400&t=ad3015411b566054ee6ab6dcbf09a0b2"},
      {name:"沟帮子熏鸡", price:109, number:2, stock:10,img:"https://paimgcdn.baidu.com/724FDC7F40FC9B95?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F15960455780.jpg&rz=urar_2_968_600&v=0"},
      {name:"篮球", price:193, number:1, stock:8,img:"https://paimgcdn.baidu.com/152E1C4F98F5E9AA?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F14611056281.jpg&rz=urar_2_968_600&v=0"}
    ]);

  let calTotal = ()=>{
    let total = 0 ; 
    //ref => script . value 
    for(let index in cartData.value){
      total += cartData.value[index].number * cartData.value[index].price; 
    }
    return total;
  }  

  let cleanCart = ()=>{
    cartData.value = [];
  }


  let removeCart = (index)=>{
    if(confirm(`是否要删除序号为${index+1}元素?`)){
      cartData.value.splice(index,1);
    }
  }

  //数组数据 数组.splice(操作的下角标,删除的数量,添加的数据...datas)
  //1. 删除 数组.splice(index,1);  删除第一个元素: 数组.splice(0,1);  删除最后两个元素 数组.splice(length-2,2);
  //2. 添加 从头添加一个元素 数组.splice(0,0,元素)  数组.splice(index,0,元素)  数组.splice(length,0,元素) 
  //3. 替换 替换头部 数组.splice(0,1,元素) 数组.splice(length-1,1,元素)

</script>

<template>
  <div class="center-block">
      <br>
      <br>
      <br>
      <table class="table table-hover table-condensed table-bordered">
          <thead>
            <tr class="bg-success">
              <td>序号</td>
              <td>商品名</td>
              <td>价格</td>
              <td>图片</td>
              <td>-</td>
              <td>数量</td>
              <td>+</td>
              <td>小计</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody v-if="cartData.length > 0">
            <tr v-for="(cart , index ) in cartData">
              <td>{{ index+1 }}</td>
              <td>{{ cart.name }}</td>
              <td>{{cart.price}}元</td>
              <td>
                <img class="img-thumbnail" width="50px" height="60px" :src="cart.img" />
              </td>
              <td> 
                <button type="button" v-bind:disabled="cart.number == 1" @click="cart.number--"  class="btn btn-warning btn-xs">-</button>
              </td>
              <td>{{ cart.number }}</td>
              <td>
                <button type="button" :disabled="cart.number == cart.stock" @click="cart.number++" class="btn btn-success btn-xs">+</button>
              </td>
              <td>{{cart.price * cart.number}}元</td>
              <td>
                <button type="button" @click="removeCart(index)" class="btn btn-danger btn-sm">移除</button>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
             <tr>
              <td colspan="9">购物车空空如也!你是不是穷!!</td>
             </tr>
          </tbody>
      </table>
      <button class="btn btn-danger btn-sm" @click="cleanCart()">清空购物车</button>
      <div class="pull-right">
        <span>总金额: <span class="text-primary"> {{ calTotal() }}</span> 元 </span>
      </div>
     
  </div>
</template>

<style scoped>

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

</style>